<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'/>
  <link rel='stylesheet' href='../../dist/mapbox.css'/>
  <link rel='stylesheet' href='embed.css'/>
  <script src='../../dist/mapbox.js'></script>
  <script src='access_token.js'></script>
  <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<style>
path {
    fill:rgba(255, 255, 255, 0.4);
    stroke-width:1;
    stroke:#558;
}
</style>
<div id='map'></div>
<script type='text/javascript'>
// This example is derived from an example by Mike Bostock:
// http://bost.ocks.org/mike/leaflet/
var map = L.mapbox.map('map')
    .setView([37.8, -96.9], 4)
    .addLayer(L.mapbox.tileLayer('examples.map-zmy97flj'));

var svg = d3.select(map.getPanes().overlayPane)
    .append('svg'),
    g = svg.append('g')
        .attr('class', 'leaflet-zoom-hide');

d3.json('us-states.json', function(collection) {
  var bounds = d3.geo.bounds(collection),
      path = d3.geo.path().projection(project);

  var feature = g.selectAll('path')
      .data(collection.features)
    .enter().append('path');

  map.on('viewreset', reset);
  reset();

  // Reposition the SVG to cover the features.
  function reset() {
    var bottomLeft = project(bounds[0]),
        topRight = project(bounds[1]);

    svg .attr('width', topRight[0] - bottomLeft[0])
        .attr('height', bottomLeft[1] - topRight[1])
        .style('margin-left', bottomLeft[0] + 'px')
        .style('margin-top', topRight[1] + 'px');

    g   .attr('transform', 'translate(' + -bottomLeft[0] + ',' + -topRight[1] + ')');

    feature.attr('d', path);
  }

  // Use Leaflet to implement a D3 geographic projection.
  function project(x) {
    var point = map.latLngToLayerPoint(L.latLng(x[1], x[0]));
    return [point.x, point.y];
  }
});
</script>
</body>
</html>
